<template>
	<view class="go_content">

		<view class="go_po_block">
			<!-- 搜索 -->
			<view class="go_Reset">
				<view class="go_search">
					<image :src="HTTP_IMG_UTL+'go_seracth.png'" style="width: 30rpx;height: 30rpx;" />
					<input @confirm="handeleSearch" style="margin-left: 6rpx;" type="text" v-model="inputValue"
						:placeholder="$t('请输入您想要查找的内容')">
				</view>
			</view>
		</view>
		<view v-if="pp_nav_on==1"
			style="width: 690rpx;height: 80rpx;display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx;">
			<view @click="isShowC = !isShowC"
				style="width: 49%;height: 80rpx;display: flex;align-items: center;justify-content: center;background-color: #FFFFFF;border-radius: 16rpx;">
				{{fication !==''?$t(fication):$t('产品')}}
			</view>
			<view
				style="width: 49%;height: 80rpx;display: flex;align-items: center;justify-content: center;background-color: #FFFFFF;border-radius: 16rpx;">
				<formCity :texthidden="true" :is_register="1" :item="cityItem" :is_port="true" @change="selCity" />
			</view>
		</view>
		<div class="tab" v-if="!hideTabBar">
			<div class="item" @click="handeleD1">
				<view style="position: relative;z-index: 9;" :style="{'font-weight':pp_nav_on==1?'bold':''}">
					{{$t('推荐')}}
				</view>
				<div class="light" :class="{lightActive:pp_nav_on == 1}"></div>
			</div>
			<div class="item" @click="handeleD2">
				<view style="position: relative;z-index: 9;" :style="{'font-weight':pp_nav_on==2?'bold':''}">
					{{$t('普通')}}
				</view>
				<div class="light" :class="{lightActive:pp_nav_on != 1}"></div>
			</div>
		</div>


		<!-- 货物列表 -->
		<!-- <view class="go_goods_list" v-if="goodsList.length !==0">

			
		</view> -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :refresher-enabled="enabled"
				@scrolltolower="handeleScrolltolower" @refresherrefresh="handeleRefresherrefresh"
				:refresher-triggered="refresh" scroll-anchoring="true">
			<view class="list_wrap">
				<view class="list_item" v-for="(item, index) in goodsList" :key="index" @click="handeleDetail(item)">
					<u-image class="list_img" height="358rpx" border-radius="26rpx"
						:src="item.imageUrl||(IMGURL+item.logo)" mode="aspectFill">
						<view slot="error">
							<u-image width="100%" height="358rpx" :src="HTTP_IMG_UTL+'zhanwei_20240923165135.png'"
								mode="aspectFill" />
						</view>
					</u-image>
					<view class="main_content">
						<view class="main_title">
							<view class="country_img">
								<image v-if="item.country==0" style="width: 50rpx;height: 36rpx;"
									:src="HTTP_IMG_UTL+'zone_001681@4x.png'" mode=""></image>
								<image v-if="item.country==1" style="width: 50rpx;height: 36rpx;"
									:src="HTTP_IMG_UTL+'zone_002680@4x.png'" mode=""></image>
							</view>
							{{lang==='zh' ? item.name : item.name_ru}}
						</view>
						<view class="price_wrap">
							<view class="price">
								<block v-if="item.desire_price != 0">
									<text class="item1">{{item.price_unit==='元' ? '￥' : '₽'}}</text>
									<text class="num">{{item.desire_price}}</text>
									<text class="item2">{{lang==='zh'?item.price_unit:item.price_unit_ru}}</text>
								</block>
								<block v-else>
									<text class="item1">{{$t("等待报价")}}</text>
								</block>
							</view>
							<view class="region_wrap">
								<image :src="HTTP_IMG_UTL+'Page_views@4x.png'"
									style="width: 24rpx;height: 24rpx;margin-right: 8rpx;" />
								<view>{{item.view_count || 0}}</view>
							</view>
						</view>
						<view class="company_wrap" v-if="pp_nav_on === 1">
							<view class="com_item" v-if="!!item.user">
								<image class="icon" :src="getImg(item.user.avatar)" mode=""
									v-if="!!item.user && !!item.user.avatar" />
								<view class="name">
									{{lang==='zh' ? item.user.username : item.user.username_ru}}
								</view>
							</view>
							<view class="order">
								{{item.goods_num || 0}}{{$t('件起订')}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>

		<!-- 无数据提示 -->
		<view v-if="isData" style="color: 999999;margin-top: 30rpx;">{{$t('暂无信息')}}</view>

		<vipPopup v-if="vipShow" :show="vipShow" @change="clickVipPopup" />

		<!-- 底部弹窗-全部 -->
		<u-popup v-model="isShowA" mode="bottom" border-radius="32" :mask-close-able="able">
			<view class="isShowA">
				<view class="isShowA_title">
					<view @click="handeleCancel(1)" style="color: #999999;">{{$t('取消')}}</view>
					<view>{{$t('全部列表')}}</view>
					<view @click="handeleDetermine(1)">{{$t('确定')}}</view>
				</view>
				<scroll-view class="scroll-content" scroll-y="true">
					<view class="isShowA_class">
						<view @click="handeleItemA(index)"
							:class="index===index_A?'isShowA_block_active':'isShowA_block'"
							v-for="(item,index) in classList" :key="index">{{lang==='zh'?item.name:item.name_ru}}</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 底部弹窗-产品 -->
		<u-popup v-model="isShowC" mode="bottom" border-radius="32" :mask-close-able="able">
			<view class="isShowC">
				<view class="isShowC_title">
					<view @click="handeleCancel(3)" style="color: #999999;">{{$t('取消')}}</view>
					<view>{{$t('产品列表')}}</view>
					<view @click="handeleDetermine(3)">{{$t('确定')}}</view>
				</view>
				<view class="isShowC_block">
					<view @click="handeleItemC(index,item)"
						:class="index===index_C?'isShowC_block_c_active':'isShowC_block_c'"
						v-for="(item,index) in classification" :key="index">{{$t(item.title)}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	//VIP弹窗
	import vipPopup from "@/components/vipPopup/index.vue";
	import formCity from '../components/formCity.vue'
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	export default {
		components: {
			formCity,
			vipPopup
		},
		data() {
			return {
				HTTP_IMG_UTL,
				hideTabBar: false,
				pp_nav_on: 1,
				is_port: true,
				able: true,
				cityItem: {
					key: "city_id",
					label: false,
					placeholder: this.$t('地区'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
				whole: '', //全部文字
				fication: '', //产品
				isShowA: false, //全部
				isShowB: false, //地区
				isShowC: false, //产品
				IMGURL: '', //图片前缀
				enabled: true,
				refresh: false,
				scrollTop: 0,
				inputValue: '', //搜索的文字
				goodsList: [], //商品列表
				current: 0, //轮播图参数
				show_city: '不限', //省市区
				page: 1, //分页
				lang: 'zh',
				classList: [], //分类信息
				index_A: '',
				index_C: '',
				goods_type: '', //货物类型
				type: 1, //金刚区为2  其他为1
				category_id: '', //选择的类别
				classification: [ //产品名数组
					{
						id: 1,
						title: "中国货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
					},
					{
						id: 2,
						title: "俄罗斯货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/99b3e2e34d1a000b681e45471d091d73.png"
					},
					{
						id: 3,
						title: "在俄中国货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
					},
					{
						id: 4,
						title: "在中俄罗斯货物",
						url: "https://gluz-oss.oss-cn-beijing.aliyuncs.com/uploads/20231101/f3163bd0f89f8a641b68068176988800.png"
					},
				],
				indexA: '', //  全部选择备份
				indexC: '', //  产品选择备份
				isData: false,
				//后台开关验证 vip权限
				vip: false,
				vipShow: false,
				pages: {
					page: 1
				},
				cate_name: '',
				name: '',
				name_ru: '',
			};
		},
		onLoad(options) {
			console.log('options:', options);
			this.pages.category_id = options.id;
			this.cate_name = options.name;
			this.name = options.name;
			this.name_ru = options.name_ru;
			// 获取语言
			this.getLang();
			this.getData();
		},
		onShow() {
			this.IMGURL = IMAGE_URL;
			this.$u.api.user.appCheck().then(res => {
				this.report = res.report;
				this.vip = res.vip;
			})

			// 获取分类
			this.getActionSheetLists();
		},
		methods: {
			getImg(val) {
				if (val.indexOf("uploads/") !== -1) {
					return this.IMGURL + val;
				} else {
					return val;
				}
			},
			handeleD1() {
				this.inputValue = '';
				this.pp_nav_on = 1;
				this.pages.page = 1;
				this.goodsList = [];
				this.getData();
			},
			handeleD2() {
				this.inputValue = '';
				this.pp_nav_on = 2;
				this.pages.page = 1;
				this.goodsList = [];
				this.getGoodsList1688();
			},
			clickVipPopup() {
				this.vipShow = false; //点击vip弹窗隐藏
			},
			// 跳转至详情
			handeleDetail(item) {
				if (this.pp_nav_on == 1) {
					uni.navigateTo({
						url: '/pages/index/detail/detail2?id=' + item.id + '&type=' + this.type +
							'&releaseType=' +
							'goods'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/detail/detail4?id=' + item.offerId + '&type=' + this.type +
							'&releaseType=' +
							'goods'
					})
				}
			},
			// 搜索
			handeleSearch() {
				this.pages.page = 1;
				this.goodsList = [];
				if (this.pp_nav_on == 1) {
					this.getData();
				} else {
					this.getGoodsList1688();
				}

			},
			// 省市区选择
			selCity(key, value) {
				let list = [];
				value.forEach((item, index) => {
					list.push(item.label)
				})
				this.pages.show_city = list.toString()
				this.pages.page = 1;
				if (this.pp_nav_on == 1) {
					this.getData()
				}

			},
			// 产品选择的选项
			handeleItemC(index, item) {
				this.index_C = index;
				this.goods_type = item.id;
			},
			// 全部选择的选项
			handeleItemA(index) {
				this.index_A = index;
			},
			// 底部弹窗确认按钮
			handeleDetermine(e) {
				if (e === 1) {
					this.indexA = this.index_A; //备份确定的选择
					this.isShowA = false;
					this.whole = this.lang === 'zh' ? this.classList[this.index_A].name : this.classList[this.index_A]
						.name_ru; //回显的名称
					this.category_id = this.classList[this.index_A].id; //选择的ID
					this.pages.page = 1;
					this.getData()
				} else {
					this.indexC = this.index_C; //备份确定的选择
					this.isShowC = false;
					this.fication = this.classification[this.index_C].title; //回显的名称
					this.pages.goods_type = this.classification[this.index_C].id; //选择的ID
					this.pages.page = 1;
					this.getData();
				}
			},
			// 底部弹窗取消按钮
			handeleCancel(e) {
				if (e === 1) {
					this.isShowA = false;
					this.index_A = this.indexA; //还原备份的选项
				} else {
					this.isShowC = false;
					this.index_C = this.indexC; //还原备份的选项
				}
			},
			// 上拉刷新
			handeleScrolltolower() {
				this.pages.page++;
				if (this.pp_nav_on === 1) {
					this.getData();
				} else {
					this.getGoodsList1688();
				}

			},
			// 下拉刷新
			handeleRefresherrefresh() {
				this.pages.page = 1;
				if (this.pp_nav_on === 1) {
					this.getData();
				} else {
					this.getGoodsList1688();
				}
				this.refresh = true


			},
			getGoodsList1688() {
				uni.showLoading({
					title: '加载中...',
					mask: true, // 是否显示透明蒙层，防止触摸穿透
				});
				this.$u.api.collection.getGoodsList1688({
					name: this.name,
					page: this.pages.page,
					searchKey: this.inputValue,
					lang: this.lang
				}).then(res => {
					if (this.pages.page == 1 && res.length == 0) {
						this.isData = true
					} else {
						this.isData = false
					}
					if (this.pages.page === 1) {
						this.goodsList = res //商品推荐
					} else {
						this.goodsList = [...this.goodsList, ...res]
					}
					uni.hideLoading();
					this.refresh = false
				}).catch(err => {
					console.log("err====", err)
					this.refresh = false
					uni.hideLoading();
				})
			},
			// 商品
			getData() {
				uni.showLoading({
					title: '加载中...',
					mask: true, // 是否显示透明蒙层，防止触摸穿透
				});
				let data = {}
				if (this.lang === 'zh') {
					data = {
						category_id: this.pages.category_id,
						type: 1, //1=推广,2=竞标
						page: this.pages.page, //分页
						searchKey: this.inputValue, //搜索框文字
						goods_type: this.pages.goods_type, //货物类型:1=中国货物,2=俄罗斯货物,3=在俄中国货物,4=在中俄罗斯货物
						departure_city: this.pages.show_city, //城市数据-例：中国,北京,北京
					}
				} else {
					data = {
						category_id: this.pages.category_id,
						type: 1, //1=推广,2=竞标
						page: this.pages.page, //分页
						searchKey: this.inputValue, //搜索框文字
						goods_type: this.pages.goods_type, //货物类型:1=中国货物,2=俄罗斯货物,3=在俄中国货物,4=在中俄罗斯货物
						departure_city_ru: this.pages.show_city, //城市数据-例：中国,北京,北京
					}
				}
				this.$u.api.collection.getGoodsList(data).then(res => {
					if (res.length === 0 && this.inputValue !== '') {
						this.getGoodsList1688()
						this.pp_nav_on = 2
						return
					}
					if (this.pages.page == 1 && res.length === 0) {
						this.isData = true
					} else {
						this.isData = false
					}
					if (this.pages.page === 1) {
						this.goodsList = res //商品推荐
					} else {
						this.goodsList = [...this.goodsList, ...res]
					}
					uni.hideLoading();
					this.refresh = false
				}).catch(err => {
					this.refresh = false
					uni.hideLoading();
				})
			},
			// 获取分类
			getActionSheetLists() {
				let data = {
					type: "release_goods",
				}
				this.$u.api.basic.getActionSheetList(data).then(res => {
					this.classList = res
					if (this.classList.length === 0) {
						this.isData = true
					}
				})
			},
			// 获取语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
							uni.setNavigationBarTitle({
								title: this.$t(this.cate_name)
							})
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
							uni.setNavigationBarTitle({
								title: this.name_ru
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.go_Reset {
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.isShowC_block_c_active {
		width: 308rpx;
		height: 108rpx;
		background: linear-gradient(109deg, #D3EF93 1%, rgba(229, 245, 203, 0.24) 61%);
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.isShowC_block_c {
		width: 308rpx;
		height: 108rpx;
		margin-bottom: 20rpx;
		background: #F3F3F3;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.isShowC_block {
		width: calc(100% - 100rpx);
		height: calc(100% - 130rpx);
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.scroll-content {
		height: calc(100% - 200rpx);
	}

	.isShowA_block_active {
		min-width: 220rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(111deg, #D3EF93 1%, rgba(229, 245, 203, 0.24) 61%);
		font-size: 24rpx;
		margin: 0rpx 10rpx 20rpx 10rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		padding: 0 53rpx 0 53rpx;
	}

	.isShowA_block {
		min-width: 220rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F3F3F3;
		font-size: 24rpx;
		margin: 0rpx 10rpx 20rpx 10rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		padding: 0 53rpx 0 53rpx;
	}

	.isShowA_class {
		margin-left: 20rpx;
		width: calc(100% - 30rpx);
		display: flex;
		flex-wrap: wrap;
		overflow-y: scroll
	}

	.isShowC_title {
		width: calc(100% - 60rpx);
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.isShowC {
		width: 100%;
		height: 383rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.isShowA_title {
		width: calc(100% - 60rpx);
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.isShowA {
		width: 100%;
		height: 813rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

    // #ifdef APP-PLUS
	.scroll-Y {
		width: calc(100% - 32rpx);
		height: calc(100vh - 90rpx);
	}
	// #endif
	
	// #ifdef H5
	.scroll-Y {
		width: calc(100% - 32rpx);
		flex: 1;
		overflow: hidden;
	}
	// #endif

	// .go_goods_list {
	// 	width: calc(100% - 32rpx);
	// 	padding-top: 20rpx;
	// 	flex: 1;
	// 	overflow: hidden;


	// }

	.list_wrap {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;

		.list_item {
			width: 352rpx;
			height: 584rpx;
			background-color: #fff;
			margin-bottom: 16rpx;
			border-radius: 26rpx;
			overflow: hidden;

			.list_img {
				margin-bottom: 24rpx;
			}

			.main_content {
				padding: 0 14rpx 0 16rpx;

				.main_title {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					/* 定义显示的行数 */
					overflow: hidden;
					text-overflow: ellipsis;
					position: relative;
					// text-indent: 60rpx;
					margin-bottom: 10rpx;
					height: 80rpx;

					.country_img {
						position: relative;
						z-index: 1;
						left: 0;
						top: 6rpx;
						display: inline-flex;
						margin-right: 10rpx;
						position: relative;
					}
				}

				.price_wrap {
					display: flex;
					width: 100%;
					margin-bottom: 20rpx;
					justify-content: space-between;

					.price {
						color: #FC000A;

						.item1 {
							font-size: 22rpx;
							margin-right: 6rpx;
						}

						.num {
							font-size: 30rpx;
							margin-right: 4rpx;
						}

						.item2 {
							font-size: 16rpx;
						}
					}

					.region_wrap {
						display: inline-flex;
						align-items: center;
						color: #999999;
						font-size: 22rpx;
					}
				}

				.company_wrap {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.com_item {
						flex: 1;
						overflow: hidden;
						display: inline-flex;
						align-items: center;
						margin-right: 10rpx;

						.icon {
							width: 30rpx;
							height: 30rpx;
							border-radius: 100%;
							margin-right: 12rpx;
							flex: none;
						}

						.name {
							max-width: 140rpx;
							overflow: hidden;
							font-size: 20rpx;
							color: #9E9E9E;
							text-overflow: ellipsis;
							word-break: break-all;
							white-space: nowrap;
						}
					}

					.order {
						flex: none;
						font-size: 20rpx;
						color: #0267B5;
					}
				}
			}
		}

	}

	.go_po_block {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.no_border {
		border: none;
		font-size: 24rpx;
	}

	.go_search {
		border-radius: 34rpx;
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;

		/deep/ .no_border {
			.u-input__input {
				color: #fff !important;
				font-size: 24rpx;
			}
		}
	}

	.go_content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.tab {
		display: flex;
		width: 100%;
		height: 80rpx;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: -20rpx;

		.item {
			position: relative;
			width: 50%;
			height: 50rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.light {
		width: 100rpx;
		height: 20rpx;
		margin: 0 auto;
		background-color: #f5f5f5;
		margin-top: 8rpx;
		position: absolute;
		left: 50%;
		bottom: 20rpx;
		margin-left: -50rpx;
	}

	.lightActive {
		background: linear-gradient(96deg, #DDF2AD 12%, #FAFDED 99%);
	}
</style>